﻿<%@page language="java" pageEncoding="UTF-8"%>
<%@ include file="../taglib.jsp"%>
<%@page import="mine.BD.utils.BDMonitor" %>
<%
   String lastUpdateTime = BDMonitor.getLastUpdateTime("item57");
   String lastUpdateTimeForMonth = BDMonitor.getLastUpdateTime("item37");
   request.setAttribute("lastUpdateTime", lastUpdateTime); 
   request.setAttribute("lastUpdateTimeForMonth", lastUpdateTimeForMonth); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1400,user-scalable=0" />
<title>出账用户</title>
<link href="css/excel_show.css" type="text/css" rel="stylesheet" />
<link href="css/valueplat.css" type="text/css" rel="stylesheet" />
<script>
var province = "${_user.province}";
var roleName = "${_user.roleName}";
var areaName = "${_user.area_name}";
</script>
</head>
<body class="body-bg">
<!---顶部导航--->
<div class="header">
     <div class="nav-con">
        <ul>
	        <li class="current"><a style="color:yellow;" href="1-1.jsp">总体情况分析</a><em class="tab-trigle"></em></li>
		    <li ><a style="color:yellow;" href="2-1.jsp">用户结构变化</a></li>
		    <li ><a style="color:yellow;" href="3-1.jsp">用户ARPU变化</a></li>
		    <li class="last"><a style="color:yellow;" href="4-1.jsp">用户个人画像</a></li>
        </ul>
     </div>
    <div class="back-home-btn"><a href="../../home">返回首页</a></div>
</div>
<!---顶部导航 END--->
<div class="ex-container" id="ex-container">
<!---tab切换--->
    <div class="navTab">
        <div class="nav_menu">
            <ul>
           	<li  class="selected"><a style="color:yellow;" href="1-1.jsp">出账用户</a></li>
                <li><a style="color:yellow;" href="1-2.jsp">新入网用户</a></li>
                <li><a style="color:yellow;" href="1-3.jsp">新入/离网用户</a></li>
                <li><a style="color:yellow;" href="1-4.jsp">开机用户</a></li>
                <!--<li><a style="color:yellow;" href="1-6.jsp">基地用户</a></li>
                 <li><a style="color:yellow;" href="1-5.jsp">4G用户使用网络情况</a></li> -->
            </ul>
        </div>
        <div class="tab_box">
            <div>
			  <!---分布图--->
			  <div class="data-con">
			  	  <div class="language-sel">
		              <input type="radio"  name="select-name" id="months">
		              <label style="color:yellow;">月指标</label>
		              <input type="radio" checked="checked" name="select-name" id="day">
		              <label style="color:yellow;">日指标</label>
		          </div>
			      <div class="select-tools clearfix">
			         <ul>
			             <li>
			                 <div class="sel-panel">
			                     <span class="sel-name">网络类型</span>
			                     <div class="mod-use-sel">
			                         <div id="netType" class="sel-opt">4G</div>
			                         <ol class="sel-list-con" style="display: none;">
			                             <li><a href="#">2G</a> </li>
			                             <li><a href="#">3G</a> </li>
			                             <li><a href="#">4G</a> </li>
			                             <!-- <li><a href="#">合计</a> </li>-->
			                         </ol>
			                     </div>
			                 </div>
			             </li>
					
			             <li>
			                 <div class="sel-panel">
			                     <span class="sel-name">月份</span>
			                     <div class="mod-use-sel">
			                         <div id="month" class="sel-opt" >${lastUpdateTime}</div>
			                     </div>
			                 </div>
			             </li>
			             <li>
			                 <div class="sel-panel">
			                     <span class="sel-province" >省份</span>
			                     <div class="mod-use-sel">
			                         <div id="provinceName" class="sel-opt" >${_user.province}</div>
			                         <ol class="sel-list-con provinceselect" >
			                         	 
			                         </ol>
			                     </div>
			                 </div>
			             </li>
			             <li>
			                 <div class="sel-panel">
			                     <span class="sel-city" >地市</span>
			                     <div class="mod-use-sel">
			                         <div id="cityName" class="sel-opt" >${_user.area_name}</div>
			                         <ol class="sel-list-con cityselect" >
			                         </ol>
			                     </div>
			                 </div>
			             </li>
			              <li>
			             	<div class="sel-panel">
			             		<!-- <span class="sel-name" id="Excel" style="cursor: pointer;">报表下载</span> -->
			             		<span class="sel-name" onclick="BigData.notifyUpdate();" style="cursor: pointer;">查询</span>
			             	</div>
			             </li> 
			             
				    <li>
					<h1 style="color:#61d5ee;text-align:center;" id="all"></h1>
				    </li>	
			         </ul>
			      </div>
			      <!--图表区域-->
			      <div class="chart_area">
				     
			          <div id="main" style="width:100%;height:100%;"></div>
					      
			      </div>
			      <!--图表区域 END-->
			  </div>
			  <!---分布图 END--->
			   </div>
        </div>
    </div>
    <!---tab切换--->
</div>
</div>
<!--弹框-->
<div class="pop-tips" id='tip' style="display:none">
 <a href="javascript:void(0)" onclick="document.getElementById('tip').style.display = 'none'" class="btn-clo">关闭</a>
 <p>很抱歉地通知您，您需要的数据还在生成中，请稍候。</p>
</div>
<!--弹框 END-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/echarts-plain-map.js"></script>
<script src="js/My97DatePicker/WdatePicker.js"></script>
<script src="js/ex_auto.js"></script> 
<script src='js/theme/part1.js' ></script>
<script src='js/BigData.js' charset="gb2312" ></script>
<script src='js/provinceAndCity.js' charset="gb2312" ></script>
<script>
   function chartStyle(){
	   $(".ex-container").css("height", $(window).height()-50 + "px");
	   $(".ex-container .chart_area").css("width", $(window).width()-40 + "px");
	   $(".ex-container .chart_area").css("height", $(window).height()-157 + "px");
   }

$(window).resize(function() {
    $(".ex-container").css("height", $(window).height()-50 + "px");
    $(".ex-container .chart_area").css("width", $(window).width()-40 + "px");
    $(".ex-container .chart_area").css("height", $(window).height()-157 + "px");
});
</script>
<script>
	var json ; 
	$("#Excel").click(function(){
		var type='出账用户-'+(searchtype.substr(searchtype.length-1)=="2"?BigData.formatDay($("#month").text()):$.trim($("#cityName").text()));
		excel(type);
	});
	function excel(type){
	   var jsonString = "";
	   jsonString = JSON.stringify(json);
	   window.location.href=encodeURI("../../ExcelExportServlet?json="+jsonString+"&type="+type+"&searchtype="+searchtype);
	}
	/**出账用户**/ 
	var searchtype='101_1';
	$(function(){
		 $("input[name=select-name]").click(function(){
			 if($("input[name=select-name]:checked").attr("id")=='day'){
				 if(roleName!="t"){
		    		 $("#cityName").show();
		         	 $(".sel-city").show();
				 }
	         	 $("#month").text("${lastUpdateTime}");
	         	 searchtype='101_2';
	    	 }else if($("input[name=select-name]:checked").attr("id")=='months'){
	    		 $("#cityName").hide();
	         	 $(".sel-city").hide();
	         	 $(".cityselect").hide();
	         	 $("#month").text("${lastUpdateTimeForMonth}");
	         	 searchtype='101_1';
	    	 }
			 showCont();
		 });
	});
	
	BigData.notifyUpdate = (function(){
	  	function callback(rdata){
			if(BigData.hasData(rdata)){
				json = rdata;
				 $("#tip").hide();
				BigData.demoChart(rdata); 	
			}else{
			    $("#tip").show();
			}
		}
	  	
	   	return function(){
			var params={};
			nettype =  $.trim($("#netType").text());
			if(searchtype == '101_1'){
				if(nettype=='合计'){
					params = {
						"type":73
					};
				    params["param0"] = BigData.formatDay($("#month").text());
					params["param1"] = $.trim($("#cityName").text());
				}else{
					params = {
						"type":57
					};
					params["param0"] = $.trim($("#netType").text());
				    params["param1"] = BigData.formatDay($("#month").text());
					params["param2"] = $.trim($("#cityName").text());
					params["province"] = $.trim($("#provinceName").text());
				}
			}else if(searchtype == '101_2'){
				if(nettype=='合计'){
					params = {
						"type":74
					};
				    params["param0"] = BigData.formatDay($("#month").text());
				}else{
					params = {
						"type":37
					};
					params["param0"] = $.trim($("#netType").text());
				    params["param1"] = BigData.formatDay($("#month").text());
				    params["param2"] = $.trim($("#provinceName").text());
				    params["province"] = $.trim($("#provinceName").text());
				}
			}
			BigData.Ajax("../../dataSource","JSON", params, true, callback);
		}
	})();
	  
	function showCont(){
		switch ($("input[name=select-name]:checked").attr("id")) {
			case 'day':
				searchtype = '101_1';
				BigData.notifyUpdate();
				break;
			case 'months':
				searchtype = '101_2';
				BigData.notifyUpdate();
				break;
			default:
				break;
		}
	}
	
	BigData.demoChart = function(rdata) {
		var C = [], series = [], size = rdata.length, option = BigData.line_option, item, n, v = 0, max = 0, j = 0;
		option.xAxis[0].data = [];
		option.series[0].data = [];
		BigData.chart = echarts.init(document.getElementById('main'), theme);
		for (var i = 0; i < size; i++) {
			if (searchtype == '101_1') {
				item = rdata[i];
				n = item["item0"];
				n = n.substring(6);
				C[i] = n;
				v = item["item1"] / 10000;
				series[i] = v;
			} else if (searchtype == '101_2') {
				if (i == 0) {
					continue;
				}
				item = rdata[i];
				n = item["item0"];
				//j = BigData.cities[n];
				if (j === null) {
					continue;
				}
				n = n[0] + '\n' + n[1];
				C[i] = n;
				v = item["item1"] / 10000;
				series[i] = v;
			}
	
			max = Math.max(max, v);
		}
		C = BigData.compactArray(C);
		series = BigData.compactArray(series);
		option["title"]["text"] = "(单位:万人)";
		option.xAxis[0].data = C;
		option.series[0].data = series;
		var range = BigData.getRange(0, max, 10);
		option["yAxis"][0]["min"] = 0;
		option["yAxis"][0]["max"] = range["high"];
		BigData.chart.setOption(option);
		//全省
		//v = rdata[0]["item1"];
		$("#all").html("全省总量: " + parseInt(max * 10000) + "人");
	};
	
	function main() {
		BigData.notifyUpdate();
	};
	
	chartStyle();
	BigData.chart = echarts.init(document.getElementById('main'), theme);
	BigData.line_option.grid.height = $("#main").height() * 0.7;
	BigData.initSelOpt();
	$("#month").click(function() {
		WdatePicker({
			dateFmt : 'yyyy年MM月',
			onpicked : function(dp) {
				$(this).text(dp.cal.getDateStr());
			}
		})
	});
	
	provinceAndCity();
	//main();
</script>        
</body>
</html>
